<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="js/vue.js"></script>
		<script src="js/echarts.min.js"></script>
	</head>
	<style>
		#canvas {
			width: 500px;
			height: 500px;
			/* border: 1px solid red; */
		}
	</style>
	<body>
		<div id="app">
			<div id="canvas"></div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						msg: 'hello world'
					}
				},
				mounted() {
					this.$nextTick(() => {
						this.init();
					});
				},
				methods: {
					init() {
						var myChart = echarts.init(document.getElementById('canvas'));
						myChart.setOption({
							title: {
								text: '一周课时分布数据',
								left: 'center'
							},
							legend: {
								data: ['张三', '李四'],
								left: 'center',
								top: 'bottom'
							},
							xAxis: {
								type: 'category',
								data: ['周一', '周二', '周三', '周四', '周五'],
								axisLine: {
									show: true,
									lineStyle: {
										color: '#4E6EF2'
									}
								},
								axisTick: {
									show: true,
									lineStyle: {
										color: '#0f0'
									}
								},
								axisLabel: {
									show: true,
									color: '#000'
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: '#999',
										type: 'dashed'
									}
								}
							},
							yAxis: {
								type: 'value',
								name: '课时(节)',
								axisLine: {
									show: true,
									lineStyle: {
										color: '#4E6EF2'
									}
								},
								axisTick: {
									show: true,
									lineStyle: {
										color: '#0f0'
									}
								},
								axisLabel: {
									show: true,
									color: '#000'
								},
								splitLine: {
									lineStyle: {
										color: '#999',
										type: 'dashed'
									}
								}
							},
							series: [{
									name: '张三',
									data: [4, 2, 4, 8, 4],
									type: 'line',
									lineStyle: {
										color: '#a2c'
									}
								},
								{
									name: '李四',
									data: [2, 6, 8, 4, 6],
									type: 'line',
									lineStyle: {
										color: '#b20'
									}
								}
							]
						});
						window.addEventListener('resize', function() {
							myChart.resize();
						});
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>